Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Pull Request 요약: 내 인증샷 이모지 표시 버그 수정 (#196)

개요

내 인증샷(currentUser == .mySelf)에서 이모지 선택 시 UI가 표시되지 않는 버그를 수정하고, 이모지 표시와 함께 애니메이션 효과를 추가합니다.

아키텍처 및 상태 관리 변경

1. TCA 상태 확장 (GoalDetailReducer.State)

• 새 계산 속성 추가: myHasEmoji: Bool
  • currentUser == .mySelf && selectedReactionEmoji != nil 조건으로 내 이모지 표시 여부 판단
  • 기존 상태(currentUser, selectedReactionEmoji)에서 파생되는 읽기 전용 속성

2. 독립적인 이모지 애니메이션 시스템 (FlyingReactionSupport.swift)

새로운 아키텍처로 이모지 비행 애니메이션을 구현:

• FlyingReactionEmitter (MainActor, ObservableObject)

  • @Published reactions 배열로 활성 파티클 관리
  • emit(emoji:config:): 배치 처리로 파티클 생성, 자동 제거 스케줄링 (duration + delay + 0.2초)
  • clear(): 모든 활성 반응 즉시 제거

• FlyingReactionParticle (Identifiable)

  • 이모지별 상태 캡슐화: 위치(startX/Y), 타이밍(startDate, duration, delay), 동작(height, amplitude, frequency, drift, phase, scale, wobble)
  • 애니메이션 헬퍼 메서드: progress(), xOffset(), yOffset(), opacity() - 시간 기반 계산

• FlyingReactionConfig

  • 배치별 애니메이션 매개변수 범위 정의 (개수, 위치, 타이밍, 동작, 시각 효과)

• FlyingReactionOverlay (View)

  • TimelineView로 60fps 업데이트, 파티클별 위치/투명도/스케일 동적 계산
  • allowsHitTesting(false) 적용

3. View 계층의 이모지 애니메이션 통합

GoalDetailView:

• @StateObject myEmojiFlyingReactionEmitter 추가: 내 이모지 애니메이션 전담
• @State didPlayMyEmojiAppearAnimation 플래그: 일회성 애니메이션 실행 제어
• 라이프사이클 관리:
  • onAppear: 기존 로직 유지
  • onDisappear: 애니메이션 플래그 리셋, 이미터 초기화 (clear())
• UI 렌더링:
  • myEmoji: 이모지 배지를 카드 우상단에 표시 (52x52, Image.Shape.emojiBubble 배경)
  • myEmojiFlyingReactionOverlay: 하단 기준 애니메이션 오버레이
• 상태 변경 감지:
  • onChange(of: store.selectedReactionEmoji): 이모지 선택 시 playMyEmojiAppearAnimationIfNeeded 트리거
  • 설정: goalDetailBottom(width:height:) - 컨테이너 크기 기반 30개 파티클, 최대 여행 거리 동적 계산

ReactionBarView:

• 인라인 FloatingReaction 모델 제거 → FlyingReactionEmitter 채택 (StateObject)
• 이모지 선택 시 액션:

  flyingReactionEmitter.emit(emoji: emoji, config: .reactionBar(width: proxy.size.width))

• 설정 추상화: reactionBarConfig(width:) 정적 메서드 → FlyingReactionConfig.reactionBar(width:) 확장
• 이모지 선택 피드백: 20개 파티클, 상단 기준 애니메이션

액션 흐름

.reactionEmojiTapped(ReactionEmoji) 액션 (currentUser == .you인 경우만):

1. state.selectedReactionEmoji 업데이트
2. .updateCurrentCardReaction(emoji.rawValue) 액션 전송
3. 비동기: photoLogClient.updateReaction() 호출 (실패 시 이전 상태 복원)

→ selectedReactionEmoji 변경 감지 → myHasEmoji 자동 계산 → onChange 트리거 → 애니메이션 실행

디자인 시스템 확장

• 새 이미지 에셋: your_emoji.svg → Image.Shape.emojiBubble
• 에셋 네임스페이스: Image.Shape 확장으로 공개 API 제공

주요 동작 변경

1. 내 인증샷 이모지 표시: myHasEmoji가 true일 때 배지 렌더링 (피그마 디자인 반영)
2. 이모지 애니메이션: 선택 시 자동으로 하단 기준 비행 애니메이션 (30개 파티클, 1.05~1.55초)
3. 상반된 사용자 관점:
   • 내가 보는 화면(mySelf): 이모지 배지만 표시 (ReactionBar 숨김)
   • 상대방이 보는 화면(you): ReactionBar에서 이모지 선택 시 비행 애니메이션 + 상태 업데이트

테스트 커버리지

테스트 파일 추가 없음 (기존 Source.swift 유지)

개요

이모지 애니메이션 시스템을 구현하여 목표 상세 화면에서 선택된 이모지가 떨어지는 반응 효과를 표시합니다. 이모지 방출기, 입자 렌더링, 상태 관리 및 구성을 추가하며 반응 막대 뷰를 리팩토링합니다.

변경 사항

시퀀스 다이어그램

sequenceDiagram
    participant User
    participant GoalDetailView
    participant FlyingReactionEmitter
    participant FlyingReactionParticle
    participant FlyingReactionOverlay
    participant TimelineView

    User->>GoalDetailView: 이모지 선택
    GoalDetailView->>GoalDetailView: playMyEmojiAppearAnimationIfNeeded() 호출
    GoalDetailView->>FlyingReactionEmitter: emit(emoji, config)
    FlyingReactionEmitter->>FlyingReactionParticle: 배치 입자 생성
    FlyingReactionEmitter->>FlyingReactionEmitter: reactions 배열에 입자 추가
    FlyingReactionEmitter->>FlyingReactionEmitter: 지연 후 제거 예약
    
    TimelineView->>FlyingReactionOverlay: 렌더링 트리거 (주기적 업데이트)
    FlyingReactionOverlay->>FlyingReactionParticle: progress(at:) 호출
    FlyingReactionParticle->>FlyingReactionParticle: xOffset, yOffset, opacity 계산
    FlyingReactionOverlay->>FlyingReactionOverlay: 위치/불투명도/크기로 입자 렌더링
    
    FlyingReactionEmitter->>FlyingReactionEmitter: 지연 만료 시 입자 제거
    FlyingReactionEmitter->>FlyingReactionOverlay: reactions 배열 업데이트
    FlyingReactionOverlay->>TimelineView: 렌더링 완료

예상 코드 리뷰 노력

🎯 3 (중간) | ⏱️ ~20분

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

• X
• Mastodon
• Reddit
• LinkedIn

Summary regeneration triggered.